<template>
  <a-form layout="vertical" >
    <a-row :gutter="[16,0]">
      <!-- 车型代码 -->
      <a-col :xs="24" :sm="24" :md="12" :lg="5" :xl="5" :xxl="5">
        <a-form-model-item :label="$t('车型ID')">
          <a-input
            v-model.trim="queryParam.bizModelId"
            :placeholder="$t('pleaseInput')+$t('车型ID')"
            :maxLength="50"
            @keyup.enter="refreshData"
            allow-clear
          />
        </a-form-model-item>
      </a-col>
      <!-- 生产车系 -->
      <a-col :xs="24" :sm="24" :md="12" :lg="5" :xl="5" :xxl="5">
        <a-form-model-item label="生产车系">
          <a-input
            v-model.trim="queryParam.productionSeries"
            :placeholder="$t('pleaseInput')+$t('生产车系')"
            :maxLength="50"
            @keyup.enter="refreshData"
            allow-clear
          />
        </a-form-model-item>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="5" :xl="5" :xxl="5">
        <a-form-model-item label="车型">
          <car-model-select
            :query="{ }"
            :default-value="queryParam.modelId"
            placeholder="车型"
            :hasAll="false"
            :clear="true"
            mode="default"
            @changeoption="(val) => {queryParam.modelId = val;refreshData(true);}"
            style="width: 100%"
          ></car-model-select>
        </a-form-model-item>
      </a-col>
      <!-- 公告车型 -->
      <a-col :xs="24" :sm="24" :md="12" :lg="5" :xl="5" :xxl="5">
        <a-form-model-item label="公告车型">
          <a-input
            v-model.trim="queryParam.publishCode"
            :placeholder="$t('pleaseInput')+'公告车型'"
            :maxLength="50"
            @keyup.enter="refreshData"
            allow-clear
          />
        </a-form-model-item>
      </a-col>
      <!-- 数据来源 -->
      <a-col :xs="24" :sm="24" :md="12" :lg="4" :xl="4" :xxl="4">
        <a-form-model-item label="数据来源">
          <a-select
              v-model="queryParam.dataFrom"
              @change="refreshData(true)"
              optionFilterProp="children"
              :filterOption="$commonFun.filterOption"
              showSearch
              placeholder="数据来源"
              allow-clear
              style="width:100%"
            >
              <a-select-option
                v-for="(item, index) in configModelDataFrom"
                :key="'dataFrom'+index"
                :value="item.value"
                :title="item.name"
              >{{ item.name }}</a-select-option
              >
            </a-select>
        </a-form-model-item>
      </a-col>
      <!-- 创建时间 -->
      <a-col :xs="24" :sm="24" :md="12" :lg="5" :xl="5" :xxl="5">
        <a-form-model-item label="创建时间">
          <a-range-picker
              v-model="createTime"
              @change="(date,dateString) => {
              queryParam.createTimeStart = dateString[0] ;
              queryParam.createTimeEnd = dateString[1] ;
              refreshData(true)}"
              :show-time="{
                hideDisabledOptions: true,
                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
              }"
              style="width: 100%" :placeholder="['开始日期','结束日期']"/>
        </a-form-model-item>
      </a-col>
      <!-- 创建人 -->
      <a-col :xs="24" :sm="24" :md="12" :lg="5" :xl="5" :xxl="5">
        <a-form-model-item label="创建人">
          <a-select
            v-model="queryParam.createBy"
            showSearch
            allow-clear
            optionFilterProp="children"
            @change="refreshData(true)"
            :filterOption="$commonFun.filterOption"
            :placeholder="$t('pleaseSelect')+ '创建人'"
            :maxTagCount="1"
            style="width:100%"
          >
            <a-select-option
              v-for="(item,index) in userList"
              :key="'user'+index"
              :value="item.id"
              :title="item.name"
            >
              {{ item.name + '('+item.account+')' }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="14"
        :xl="14"
        :xxl="14"
        style="margin-top: 22px;"
        class="btnWarp">
        <a-form-item class="searchBtns">
          <a-button-group>
            <auth-button type="primary" @click="refreshData" :auth="managePerms.modelStyle.view">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          </a-button-group>
          <auth-button @click="handleAddEdit" :auth="managePerms.modelStyle.add">
            <i class="iconfont icon-xinjian"></i>
            {{ $t('new') }}
          </auth-button>
          <auth-button type="danger" :auth="managePerms.modelStyle.delete" @click="handleBatchDelete">
            <i class="iconfont icon-shanchu"></i>
            {{ $t('batchDelete') }}
          </auth-button>
          <auth-button @click="handleImport" :auth="managePerms.modelStyle.import">
            {{ $t('import') }}
          </auth-button>
          <auth-button @click="exportXlsx" :loading="exportings" :auth="managePerms.modelStyle.export">
            {{ $t('export') }}
          </auth-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import moment from 'moment'
import AuthButton from '@/components/AuthButton'
import EditItem from '@/components/EditItem'
import { mapState } from 'vuex'
import userApi from "@/api/modules/system/user";
import CarModelSelect from '@/views/components/CarModelSelect'
import { managePerms } from '@/config/permission/index'
export default {
  components: {
    AuthButton,
    EditItem,
    CarModelSelect
  },
  props: {
    exporting: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      moment,
      userList: [],
      createTime: null,
      exportings: false,
      managePerms
    }
  },
  created(){
    this.$store.dispatch('getConfigModelDataFromDictCodeData');
    this.getUsers();
  },
  computed:{
    ...mapState({
      queryParam: state => state.modelStyle.queryParam,
      configModelDataFrom: (state) => state.dict.configModelDataFromDictCode,
      instantUpdateTime: (state) => state.app.instantUpdateTime,
    }),
  },
  watch: {
    exporting: {
      handler (val) {
        this.exportings = val
      },
      immediate: true
    }
  },
  methods: {
    getUsers() {
      userApi.getUserPageData({pageSize:5000}).then(res => {
        this.userList = res.data;
      })
    },
    refreshData(){
      this.$emit('query',this.queryParam)
    },
    clearCondition () {
      this.$emit('clear')
    },
    handleAddEdit () {
      this.$emit('handleAddEdit')
    },
    handleBatchDelete () {
      this.$emit('handleBatchDelete')
    },
    handleImport () {
      this.$emit('handleImport')
    },
    exportXlsx () {
      this.$emit('exportXlsx')
    }
  }
}
</script>
<style lang="less" scoped>
 ::v-deep .ant-form-item-label {
  padding-bottom: 2px;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
